<template>
  <div class="business-wrapper">
    <!-- 商家头部 -->
    <header class="business-header">
      <h1>{{ businessInfo.businessName || '商家管理中心' }}</h1>
      <button @click="logout" class="logout-btn">退出登录</button>
    </header>

    <!-- 功能导航 -->
    <nav class="business-nav">
      <button @click="switchTab('foodList')" :class="{active: activeTab === 'foodList'}">
        我的食品
      </button>
      <button @click="switchTab('addFood')" :class="{active: activeTab === 'addFood'}">
        添加食品
      </button>
      <button @click="switchTab('businessInfo')" :class="{active: activeTab === 'businessInfo'}">
        商家信息
      </button>
      <button @click="switchTab('wallet')" :class="{active: activeTab === 'wallet'}">
        钱包管理
      </button>
    </nav>

    <!-- 内容区域 -->
    <main class="business-content">
      <!-- 食品列表 -->
      <div v-if="activeTab === 'foodList'" class="food-list">
        <div class="search-bar">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索食品名称..."
            @input="searchFoods">
          <button @click="refreshFoods">
            <i class="fa fa-refresh"></i> 刷新
          </button>
        </div>

        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="foods.length === 0" class="no-data">暂无食品数据</div>
        <ul v-else class="food-items">
          <li v-for="food in filteredFoods" :key="food.id" class="food-item">
            <div class="food-image">
              <img :src="food.foodImg || defaultFoodImage" @error="handleImageError">
            </div>
            <div class="food-info">
              <h3>{{ food.foodName }}</h3>
              <p>{{ food.foodExplain }}</p>
              <p class="price">¥{{ food.foodPrice?.toFixed(2) }}</p>
            </div>
            <div class="food-actions">
              <button @click="editFood(food)" class="edit-btn">
                <i class="fa fa-edit"></i> 编辑
              </button>
              <button @click="deleteFood(food.id)" class="delete-btn">
                <i class="fa fa-trash"></i> 删除
              </button>
            </div>
          </li>
        </ul>
      </div>

      <!-- 添加食品表单 -->
      <div v-if="activeTab === 'addFood'" class="food-form">
        <h2>{{ editingFood ? '编辑食品' : '添加新食品' }}</h2>
        <form @submit.prevent="submitFood">
          <div class="form-group">
            <label>食品名称</label>
            <input type="text" v-model="foodForm.foodName" required>
          </div>
          <div class="form-group">
            <label>食品描述</label>
            <textarea v-model="foodForm.foodExplain"></textarea>
          </div>
          <div class="form-group">
            <label>价格</label>
            <input type="number" v-model="foodForm.foodPrice" min="0" step="0.01" required>
          </div>
          <div class="form-group">
            <label>食品图片</label>
            <input type="file" @change="handleImageUpload" accept="image/*">
            <div v-if="foodForm.foodImg" class="image-preview">
              <img :src="foodForm.foodImg">
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" :disabled="isSubmitting">
              {{ isSubmitting ? '处理中...' : '保存' }}
            </button>
            <button type="button" @click="cancelEdit" v-if="editingFood">取消</button>
          </div>
        </form>
      </div>

      <!-- 商家信息 -->
      <div v-if="activeTab === 'businessInfo'" class="business-info">
        <div class="info-header">
          <h2>商家信息</h2>
          <button @click="toggleEditMode" class="edit-business-btn">
            {{ isEditingBusiness ? '取消编辑' : '编辑信息' }}
          </button>
        </div>

        <div v-if="isEditingBusiness" class="business-form">
          <form @submit.prevent="updateBusinessInfo">
            <div class="form-group">
              <label>商家名称</label>
              <input type="text" v-model="businessForm.businessName" required>
            </div>
            <div class="form-group">
              <label>商家地址</label>
              <input type="text" v-model="businessForm.businessAddress">
            </div>
            <div class="form-group">
              <label>商家描述</label>
              <textarea v-model="businessForm.businessExplain"></textarea>
            </div>
            <div class="form-group">
              <label>起送价</label>
              <input type="number" v-model="businessForm.startPrice" min="0" step="0.01">
            </div>
            <div class="form-group">
              <label>配送费</label>
              <input type="number" v-model="businessForm.deliveryPrice" min="0" step="0.01">
            </div>
            <div class="form-group">
              <label>商家图片</label>
              <input type="file" @change="handleBusinessImageUpload" accept="image/*">
              <div v-if="businessForm.businessImg" class="image-preview">
                <img :src="businessForm.businessImg">
              </div>
            </div>
            <div class="form-actions">
              <button type="submit" :disabled="isUpdatingBusiness">
                {{ isUpdatingBusiness ? '更新中...' : '更新商家信息' }}
              </button>
              <button type="button" @click="cancelBusinessEdit">取消</button>
            </div>
          </form>
        </div>
        <div v-else class="info-display">
          <div class="info-item">
            <label>商家名称:</label>
            <span>{{ businessInfo.businessName || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>商家地址:</label>
            <span>{{ businessInfo.businessAddress || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>商家描述:</label>
            <span>{{ businessInfo.businessExplain || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>起送价:</label>
            <span>¥{{ (businessInfo.startPrice || 0).toFixed(2) }}</span>
          </div>
          <div class="info-item">
            <label>配送费:</label>
            <span>¥{{ (businessInfo.deliveryPrice || 0).toFixed(2) }}</span>
          </div>
          <div class="info-item">
            <label>商家图片:</label>
            <img :src="businessInfo.businessImg || defaultBusinessImage" class="business-image">
          </div>
        </div>
      </div>

      <!-- 钱包管理 -->
      <div v-if="activeTab === 'wallet'" class="wallet-section">
        <div class="wallet-header">
          <h2>商家钱包</h2>
          <button class="refresh-btn" @click="refreshWallet" :disabled="walletLoading">
            <i class="fa fa-refresh"></i>
            {{ walletLoading ? '刷新中...' : '刷新' }}
          </button>
        </div>

        <div v-if="walletLoading" class="wallet-loading">
          <i class="fa fa-spinner fa-spin"></i>
          正在获取钱包信息...
        </div>

        <div v-else>
          <div v-if="hasWallet" class="wallet-info">
            <div class="wallet-summary-card simple">
              <div class="summary-header">
                <div class="summary-balance">
                  <label>当前余额</label>
                  <span>¥{{ formatCurrency(walletInfo.balance) }}</span>
                </div>
                <div class="summary-status">
                  <label>钱包状态</label>
                  <span class="status-badge" :class="walletInfo.status?.toLowerCase()">{{ getWalletStatusText(walletInfo.status) }}</span>
                </div>
              </div>
              <p class="summary-tip">订单确认收货后资金将自动入账您的商家钱包。</p>
            </div>
          </div>

          <div v-else class="wallet-empty">
            <i class="fa fa-wallet wallet-icon"></i>
            <h3>尚未开通商家钱包</h3>
            <p>开通钱包后可接收订单收入、管理资金。</p>
            <button class="create-wallet-btn" @click="createWallet" :disabled="isCreatingWallet">
              {{ isCreatingWallet ? '申请中...' : '立即申请钱包' }}
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'BusinessDashboard',
  data() {
    return {
      activeTab: 'foodList',
      businessInfo: {},
      businessId: null,
      foods: [],
      filteredFoods: [],
      searchQuery: '',
      loading: false,
      editingFood: null,
      foodForm: {
        foodName: '',
        foodExplain: '',
        foodPrice: 0,
        foodImg: ''
      },
      isSubmitting: false,
      isEditingBusiness: false,
      isUpdatingBusiness: false,
      businessForm: {
        businessName: '',
        businessAddress: '',
        businessExplain: '',
        businessImg: '',
        startPrice: 0,
        deliveryPrice: 0
      },
      walletInfo: {
        walletId: null,
        userId: null,
        balance: 0,
        frozenAmount: 0,
        bonusAmount: 0,
        remainingOverdraft: 0,
        overdraftUsed: 0,
        overdraftLimit: 0,
        totalAssets: 0,
        isVip: false,
        status: 'NORMAL',
        interestDue: 0
      },
      walletLoading: false,
      hasWallet: false,
      isCreatingWallet: false,
      walletInitialized: false,
      defaultFoodImage: require('../assets/default-food.png'),
      defaultBusinessImage: require('../assets/default-business.png')
    }
  },
  async created() {
    await this.loadBusinessInfo();
    await this.loadFoods();
    await this.loadWallet();
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
      if (tab === 'wallet' && !this.walletInitialized) {
        this.loadWallet();
      }
    },

    // 修复：使用新的存储工具函数
    getSessionStorage(key) {
      try {
        const item = sessionStorage.getItem(key);
        return item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('获取sessionStorage失败:', error);
        return null;
      }
    },
    
    setSessionStorage(key, value) {
      try {
        sessionStorage.setItem(key, JSON.stringify(value));
      } catch (error) {
        console.error('设置sessionStorage失败:', error);
      }
    },
    
    removeSessionStorage(key) {
      try {
        sessionStorage.removeItem(key);
      } catch (error) {
        console.error('移除sessionStorage失败:', error);
      }
    },

    async loadWallet(silent = false) {
      try {
        this.walletLoading = true;

        const user = this.getSessionStorage('user');
        if (!user || !user.userId) {
          throw new Error('用户未登录，请重新登录');
        }

        const response = await this.$axios.get(`/api/virtual-wallets/user/${user.userId}`);

        if (response.data.success && response.data.data) {
          this.walletInfo = response.data.data;
          this.hasWallet = true;
        } else {
          this.hasWallet = false;
        }

        this.walletInitialized = true;
      } catch (error) {
        if (error.response?.status === 404) {
          this.hasWallet = false;
          this.walletInitialized = true;
          console.log('商家尚未开通钱包');
        } else {
          this.handleError('加载钱包信息', error);
        }
      } finally {
        this.walletLoading = false;
      }
    },

    async refreshWallet() {
      await this.loadWallet(true);
    },

    async createWallet() {
      if (this.isCreatingWallet) {
        return;
      }

      try {
        const user = this.getSessionStorage('user');
        if (!user || !user.userId) {
          alert('用户未登录，请重新登录');
          this.$router.push('/login');
          return;
        }

        this.isCreatingWallet = true;

        const response = await this.$axios.post(
          `/api/virtual-wallets?userId=${user.userId}`,
          {},
          {
            headers: {
              Authorization: user.token ? `Bearer ${user.token}` : undefined
            }
          }
        );

        if (response.data.success) {
          alert('钱包申请成功！');
          this.hasWallet = true;
          this.walletInfo = response.data.data;
          await this.loadWallet(true);
        } else {
          alert('钱包申请失败: ' + (response.data.message || '未知错误'));
        }
      } catch (error) {
        console.error('钱包申请失败:', error);
        if (error.response?.data?.message) {
          alert('钱包申请失败: ' + error.response.data.message);
        } else {
          alert('钱包申请失败，请稍后重试');
        }
      } finally {
        this.isCreatingWallet = false;
      }
    },

    formatCurrency(value) {
      const number = Number(value) || 0;
      return number.toFixed(2);
    },

    getWalletStatusText(status) {
      const statusMap = {
        NORMAL: '正常',
        FROZEN: '冻结',
        LOCKED: '锁定'
      };
      return statusMap[status] || status || '未知';
    },

    // 修改：使用新的API接口获取商家信息
    async loadBusinessInfo() {
      try {
        const user = this.getSessionStorage('user');
        if (user && user.businessId) {
          this.businessId = user.businessId;
          
          // 使用新的API接口：/api/businesses/{id}
          const response = await this.$axios.get(`/api/businesses/${this.businessId}`);
          if (response.data.success) {
            this.businessInfo = response.data.data || {};
            console.log('商家信息加载成功:', this.businessInfo);
          } else {
            throw new Error(response.data.message || '获取商家信息失败');
          }
        } else {
          throw new Error('用户信息不存在，请重新登录');
        }
      } catch (error) {
        console.error('加载商家信息失败:', error);
        this.handleError('加载商家信息', error);
      }
    },
    
    async loadFoods() {
      if (!this.businessId) {
        console.error('商家ID不存在，无法加载食品列表');
        return;
      }
      
      this.loading = true;
      try {
        const response = await this.$axios.get('/api/foods', {
          params: { business: this.businessId }
        });
        
        if (response.data.success) {
          this.foods = response.data.data || [];
          this.filteredFoods = [...this.foods];
        } else {
          throw new Error(response.data.message || '获取食品列表失败');
        }
      } catch (error) {
        console.error('加载食品列表失败:', error);
        this.handleError('加载食品列表', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 商家信息编辑相关方法
    toggleEditMode() {
      this.isEditingBusiness = !this.isEditingBusiness;
      if (this.isEditingBusiness) {
        this.businessForm = {
          businessName: this.businessInfo.businessName || '',
          businessAddress: this.businessInfo.businessAddress || '',
          businessExplain: this.businessInfo.businessExplain || '',
          businessImg: this.businessInfo.businessImg || '',
          startPrice: this.businessInfo.startPrice || 0,
          deliveryPrice: this.businessInfo.deliveryPrice || 0
        };
      }
    },
    
    handleBusinessImageUpload(event) {
      const file = event.target.files[0];
      if (!file) return;
      
      if (file.size > 2 * 1024 * 1024) {
        alert('图片大小不能超过2MB');
        return;
      }
      
      const reader = new FileReader();
      reader.onload = (e) => {
        this.businessForm.businessImg = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    
    async updateBusinessInfo() {
      if (!this.validateBusinessForm()) {
        return;
      }
      
      this.isUpdatingBusiness = true;
      
      try {
        // 准备商家数据，根据接口要求包含businessOwner信息
        const businessData = {
          ...this.businessForm,
          businessOwner: {
            username: this.getSessionStorage('user')?.username || '',
            userSex: this.getSessionStorage('user')?.userSex || 0,
            userImg: this.getSessionStorage('user')?.userImg || ''
          }
        };
        
        const response = await this.$axios.put(
          `/api/businesses/${this.businessId}`,
          businessData,
          { headers: { 'Content-Type': 'application/json' } }
        );
        
        if (response.data.success) {
          alert('商家信息更新成功');
          this.businessInfo = response.data.data || {};
          this.isEditingBusiness = false;
          // 更新sessionStorage中的用户信息
          this.updateUserSessionStorage();
        } else {
          throw new Error(response.data.message || '更新失败');
        }
      } catch (error) {
        console.error('更新商家信息失败:', error);
        this.handleError('更新商家信息', error);
      } finally {
        this.isUpdatingBusiness = false;
      }
    },
    
    cancelBusinessEdit() {
      this.isEditingBusiness = false;
      this.businessForm = {
        businessName: '',
        businessAddress: '',
        businessExplain: '',
        businessImg: '',
        startPrice: 0,
        deliveryPrice: 0
      };
    },
    
    validateBusinessForm() {
      if (!this.businessForm.businessName.trim()) {
        alert('请输入商家名称');
        return false;
      }
      
      if (this.businessForm.startPrice < 0) {
        alert('起送价不能为负数');
        return false;
      }
      
      if (this.businessForm.deliveryPrice < 0) {
        alert('配送费不能为负数');
        return false;
      }
      
      return true;
    },
    
    updateUserSessionStorage() {
      const user = this.getSessionStorage('user');
      if (user) {
        user.business = this.businessInfo;
        this.setSessionStorage('user', user);
      }
    },
    
    searchFoods() {
      if (!this.searchQuery) {
        this.filteredFoods = [...this.foods];
        return;
      }
      const query = this.searchQuery.toLowerCase();
      this.filteredFoods = this.foods.filter(food => 
        food.foodName?.toLowerCase().includes(query)
      );
    },
    
    refreshFoods() {
      this.loadFoods();
    },
    
    editFood(food) {
      this.editingFood = food;
      this.foodForm = {
        foodName: food.foodName || '',
        foodExplain: food.foodExplain || '',
        foodPrice: food.foodPrice || 0,
        foodImg: food.foodImg || ''
      };
      this.activeTab = 'addFood';
    },
    
    async deleteFood(foodId) {
      if (!confirm('确定要删除这个食品吗？')) return;
      
      try {
        const response = await this.$axios.delete(`/api/foods/${foodId}`);
        
        if (response.data.success) {
          alert('删除成功');
          this.loadFoods();
        } else {
          throw new Error(response.data.message || '删除失败');
        }
      } catch (error) {
        console.error('删除食品失败:', error);
        this.handleError('删除食品', error);
      }
    },
    
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (!file) return;
      
      if (file.size > 2 * 1024 * 1024) {
        alert('图片大小不能超过2MB');
        return;
      }
      
      const reader = new FileReader();
      reader.onload = (e) => {
        this.foodForm.foodImg = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    
    async submitFood() {
      if (!this.validateFoodForm()) {
        return;
      }
      
      this.isSubmitting = true;
      
      try {
        const foodData = {
          ...this.foodForm,
          business: { id: this.businessId }
        };
        
        let response;
        if (this.editingFood) {
          // 更新食品
          response = await this.$axios.put(
            `/api/foods/${this.editingFood.id}`,
            foodData,
            { headers: { 'Content-Type': 'application/json' } }
          );
        } else {
          // 添加新食品
          response = await this.$axios.post(
            '/api/foods',
            foodData,
            { headers: { 'Content-Type': 'application/json' } }
          );
        }
        
        if (response.data.success) {
          alert(this.editingFood ? '食品更新成功' : '食品添加成功');
          this.resetFoodForm();
          this.activeTab = 'foodList';
          this.loadFoods();
        } else {
          throw new Error(response.data.message || '保存失败');
        }
      } catch (error) {
        console.error('保存食品失败:', error);
        this.handleError('保存食品', error);
      } finally {
        this.isSubmitting = false;
      }
    },
    
    cancelEdit() {
      this.resetFoodForm();
      this.activeTab = 'foodList';
    },
    
    resetFoodForm() {
      this.foodForm = {
        foodName: '',
        foodExplain: '',
        foodPrice: 0,
        foodImg: ''
      };
      this.editingFood = null;
    },
    
    validateFoodForm() {
      if (!this.foodForm.foodName.trim()) {
        alert('请输入食品名称');
        return false;
      }
      
      if (this.foodForm.foodPrice <= 0) {
        alert('请输入有效的价格');
        return false;
      }
      
      return true;
    },
    
    handleImageError(e) {
      e.target.src = this.defaultFoodImage;
    },
    
    handleError(operation, error) {
      let errorMessage = `${operation}失败`;
      
      if (error.response) {
        switch (error.response.status) {
          case 401:
            errorMessage = '用户未登录或会话已过期';
            this.$router.push('/login');
            break;
          case 404:
            errorMessage = '请求的资源不存在';
            break;
          case 500:
            errorMessage = '服务器内部错误';
            break;
          default:
            if (error.response.data?.message) {
              errorMessage = error.response.data.message;
            }
        }
      } else if (error.message) {
        errorMessage = error.message;
      }
      
      alert(errorMessage);
    },
    
    logout() {
      localStorage.removeItem('jwtToken');
      this.removeSessionStorage('user');
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.business-wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.business-header {
  background-color: #0097FF;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.business-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.logout-btn {
  background-color: #ff4757;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.business-nav {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #ddd;
}

.business-nav button {
  flex: 1;
  padding: 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  border-bottom: 3px solid transparent;
}

.business-nav button.active {
  border-bottom-color: #0097FF;
  font-weight: bold;
}

.business-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 食品列表样式 */
.food-list {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-bar {
  display: flex;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-bar button {
  margin-left: 10px;
  padding: 8px 15px;
  background-color: #0097FF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.food-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.food-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.food-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.food-info {
  flex: 1;
}

.food-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
}

.food-info p {
  margin: 5px 0;
  color: #666;
}

.price {
  font-weight: bold;
  color: #ff4757;
}

.food-actions {
  display: flex;
  gap: 10px;
}

.food-actions button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background-color: #38CA73;
  color: white;
}

.delete-btn {
  background-color: #ff4757;
  color: white;
}

/* 食品表单样式 */
.food-form {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.food-form h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 80%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group textarea {
  min-height: 100px;
}

.image-preview img {
  max-width: 200px;
  max-height: 200px;
  margin-top: 10px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.form-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button[type="submit"] {
  background-color: #0097FF;
  color: white;
}

.form-actions button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 商家信息样式 */
.business-info {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-header h2 {
  margin: 0;
}

.edit-business-btn {
  background-color: #38CA73;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.business-form {
  margin-top: 20px;
}

.info-display .info-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.info-item label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.business-image {
  max-width: 300px;
  max-height: 300px;
  margin-top: 10px;
  border-radius: 4px;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .food-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .food-image {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .food-actions {
    margin-top: 15px;
    width: 100%;
    justify-content: flex-end;
  }
  
  .info-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* 钱包管理样式 */
.wallet-section {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(82, 63, 105, 0.08);
}

.wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.wallet-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.refresh-btn {
  background: none;
  border: 1px solid #0097FF;
  color: #0097FF;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.refresh-btn:not(:disabled):hover {
  background-color: #0097FF;
  color: #fff;
}

.wallet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #666;
  padding: 40px 0;
  font-size: 1rem;
}

.wallet-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wallet-summary-card {
  background: linear-gradient(135deg, #0097FF, #38CA73);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 151, 255, 0.2);
}

.summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}
.summary-row:last-child {
  margin-bottom: 0;
}
.summary-item {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-item label {
  font-size: 0.9rem;
  opacity: 0.85;
}
.summary-item span {
  font-size: 1.4rem;
  font-weight: 600;
}

.wallet-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.detail-card {
  background-color: #f8f9ff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(0, 151, 255, 0.08);
}
.detail-card label {
  color: #666;
  font-size: 0.9rem;
}
.detail-card span {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  word-break: break-all;
}

.wallet-tips {
  background-color: #f5fbff;
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 151, 255, 0.1);
}
.wallet-tips h3 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  color: #0097FF;
}
.wallet-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  line-height: 1.8;
}

.wallet-empty {
  padding: 40px 20px;
  text-align: center;
  background-color: #f8f9ff;
  border-radius: 16px;
  border: 2px dashed rgba(0, 151, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.wallet-icon {
  font-size: 48px;
  color: #0097FF;
}

.create-wallet-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  background-color: #0097FF;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}
.create-wallet-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.create-wallet-btn:not(:disabled):hover {
  background-color: #0085e0;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  text-transform: uppercase;
}
.status-badge.frozen {
  background-color: rgba(255, 71, 87, 0.8);
}
.status-badge.locked {
  background-color: rgba(255, 149, 0, 0.85);
}

.wallet-summary-card.simple {
  background: #ffffff;
  color: #333;
  border: 1px solid rgba(0, 151, 255, 0.12);
  box-shadow: 0 12px 24px rgba(0, 151, 255, 0.08);
}
.wallet-summary-card.simple .summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wallet-summary-card.simple .summary-balance,
.wallet-summary-card.simple .summary-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wallet-summary-card.simple .summary-balance span {
  font-size: 2rem;
  font-weight: 600;
  color: #0097FF;
}
.wallet-summary-card.simple .summary-status span {
  font-size: 1.1rem;
  font-weight: 600;
}
.summary-tip {
  margin: 16px 0 0 0;
  font-size: 0.9rem;
  color: #666;
}
</style>